<template>
  <div class="detail-container">
    <el-button type="primary" icon="el-icon-back" @click="goBack()"
      >返回</el-button
    >
    <el-card class="detail-card">
      <div slot="header" style="text-align: center; font-size: large">
        <span style="text-align: center">{{ form.opusName }}</span>
      </div>

      <div v-if="false">{{ form.id }}</div>
      <div class="detail-content">
        <el-row :gutter="20">
          <el-col :span="8"
            >作品编号：<el-tag>{{ form.opusNum }}</el-tag></el-col
          >
          <el-col :span="8"
            >创建人：<el-tag>{{ form.creatorName }}</el-tag></el-col
          >
          <el-col :span="8"
            >创建时间：<el-date-picker
              v-model="form.created"
              type="date"
              disabled
              style="width: 50%"
            />
          </el-col>
        </el-row>
      </div>
    </el-card>
    <br />
    <el-card class="el-card-margin">
      <el-tabs type="border-card">
        <el-tab-pane label="基础信息">
          <el-descriptions title="作品信息" :column="2" border>
            <el-descriptions-item label="作品名称">
            <i class="el-icon-document"></i>
            {{ form.opusName }}
          </el-descriptions-item>
        
          <el-descriptions-item label="作品编号">
            <i class="el-icon-tag"></i>
            {{ form.opusNum }}
          </el-descriptions-item>
        
          <el-descriptions-item label="作品类别">
            <i class="el-icon-folder"></i>
            {{ form.opusCategoryName }}
          </el-descriptions-item>
        
          <el-descriptions-item label="公司">
            <i class="el-icon-office-building"></i>
            {{ form.company }}
          </el-descriptions-item>
        
          <el-descriptions-item label="版权所有人">
            <i class="el-icon-user"></i>
            {{ form.copyrightOwner }}
          </el-descriptions-item>
        
          <el-descriptions-item label="版权号">
            <i class="el-icon-lock"></i>
            {{ form.copyrightNum }}
          </el-descriptions-item>
        
          <el-descriptions-item label="作者">
            <i class="el-icon-user"></i>
            {{ form.author }}
          </el-descriptions-item>
        
          <el-descriptions-item label="创作完成日期">
            <el-date-picker
              v-model="form.creationDoneDate"
              type="date"
              disabled
              style="width: 50%"
            />
          </el-descriptions-item>
        
          <el-descriptions-item label="登记日期">
            <el-date-picker
              v-model="form.registerDate"
              type="date"
              disabled
              style="width: 50%"
            />
          </el-descriptions-item>
        
          <el-descriptions-item label="获取方式">
            <i class="el-icon-swap"></i>
            {{ form.getMethod === 1 ? '方法一' : '方法二' }}
          </el-descriptions-item>form
        
          <el-descriptions-item label="使用限制">
            <i class="el-icon-clock"></i>
            {{ form.useLimit }}
          </el-descriptions-item>
        
          <el-descriptions-item label="版权期限">
            <i class="el-icon-time"></i>
            {{ form.copyrightTerm }} 年
          </el-descriptions-item>
        
          <el-descriptions-item label="备注">
            <i class="el-icon-help"></i>
            {{ form.remark }}
          </el-descriptions-item>
          </el-descriptions>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { copyright } from "@/api/copyright";

export default {
  data() {
    return {
      form: {
        id: "",
        opusName: "",
        opusNum: "",
        opusCategoryName: "",
        company: "",
        copyrightOwner: "",
        copyrightNum: "",
        author: "",
        creationDoneDate: "",
        registerDate: "",
        getMethod: "",
        useLimit: "",
        copyrightTerm: "",
        remark: "",
        creatorName: "",
        created: "",
        updated: "",
      },
      id: this.$route.params.id,
    };
  },
  created() {
    this.getBasic();
  },
  methods: {
    getBasic() {
      copyright.findBasic(this.id).then((res) => {
        this.form = res.data;
      });
    },
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped></style>
